<template>
  <div class="main">
    <div v-if="myClient.length>0">
      <ul>
        <li v-for="(item, index) in myClient" :key="index">
          <span class="name">{{item.fullName?item.fullName:item.nickName}}</span>
          <span class="time" style="color: #b8bab9;">{{item.recommendTime}}</span>
        </li>
      </ul>
      <div class="store_footer" v-if="!loadMore">—— 已经到底啦 ——</div>
    </div>
    <div v-else>
      <notDatas item="暂无引荐客户" />
    </div>
  </div>
</template>

<script>
import { myRecommend } from '@/api/api';
import notDatas from '@/components/notDatas';
export default {
  props: {},
  data () {
    return {
      loadMore: true,
      pages: {
        pageIndex: 1,
        pageSize: 10
      },
      myClient: []
    };
  },
  components: { notDatas },
  onLoad () {
    this.myRecommend();
  },
  // 上拉加载更多
  onReachBottom () {
    this.myRecommend();
  },
  // 下拉刷新
  onPullDownRefresh () {
    this.myClient = [];
    this.pages.pageIndex = 1;
    this.loadMore = true;
    this.myRecommend();
    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },
  watch: {},
  methods: {
    /** 我的客户分页 */
    async myRecommend () {
      if (this.loadMore) {
        await myRecommend(this.pages).then(res => {
          this.myClient = this.myClient.concat(res.list);
          ++this.pages.pageIndex;
          if (res.pages < this.pages.pageIndex) {
            this.loadMore = false;
          }
        });
      }
    }
  },
  computed: {},
  created () {},
  mounted () {}
};
</script>

<style scoped lang="less">
ul {
  padding: 15px 15px 26px;
  display: flex;
  flex-direction: column;
  li {
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      line-height: 51px;
      // color: rgba(2, 6, 4, 1);
    }
  }
}
.store_footer {
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #b8bab9;
  margin-bottom: 44px;
}
</style>
